<!DOCTYPE HTML>
<html style="direction: ltr;" lang="fr">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
<style type=text/css>
    body { background-image: url(http://localhost:8080/stream); background-repeat:no-repeat; background-position:center top; background-attachment:fixed; height:100% }
</style>
<script type = "text/javascript" language="javascript"
src = "static/script.js" charset="utf-8"></script>
</head>
<body>
This is a prototype of Man Machine Interface in browser
&nbsp;
<p>
Active mode: 
<output id = "controlMode">
Manual control
</output>
</p>
<p>
<button onclick = "setManualControl()">
Manual control
</button>
<button onclick = "setAutomaticControl()">
Automatic control
</button>
<button onclick = "setJoystickControl()">
Joystick control
</button>
</p>
<p>
Time: 
<output id = "time">
Not connected to time server
</output>
</p>
<p>
Orientation: 
<output id = "orientation">
0°
</output>
</p>
<p>
Elevation: 
<output id = "elevation">
45°
</output>
</p>
<p>
Absolute bearing: 
<output id = "absoluteBearing">
271°
</output>
</p>
<p>
Wind relative bearing: 
<output id = "relativeBearing">
15°
</output>
</p>
<form action = "">
<fieldset>
<input id = "setOrientationRange"
type = "range"
min = "0"
max = "256"
value = "128"
step = "8"
onchange = "updateSetOrientationRange()" />
<input id = "setOrientationNumber"
type = "number"
min = "0"
max = "256"
value = "128"
step = "1"
onchange = "updateSetOrientationNumber()" />
<output id = "setOrientation">128</output>
</fieldset>
<fieldset>
<input id = "KpRange"
type = "range"
min = "0"
max = "256"
value = "128"
onchange = "updateKp()" />
<output id = "Kp">128</output>
</fieldset>
<fieldset>
<input id = "KdRange"
type = "range"
min = "0"
max = "256"
value = "128"
onchange = "updateKd()" />
<output id = "Kd">128</output>
</fieldset>
<fieldset>
<input id = "KiRange"
type = "range"
min = "0"
max = "256"
value = "128"
onchange = "updateKi()" />
<output id = "Ki">128</output>
</fieldset>
        <script type="text/javascript">
            var ws = new WebSocket("ws://localhost:8080/websocket");
            ws.onmessage = function(evt){
		var myOutput = document.getElementById("time");
                myOutput.value = evt.data;
            }
        </script>
<script>
  var inputs = document.getElementsByTagName('input');

  for(var i = 0; i < inputs.length; i++) {
    if(inputs[i].type == 'range') {
      inputs[i].addEventListener('click', function() {
        this.focus(); 
      });
    }
  }
</script>
</body>
</html>
            
